import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { RcmHeaderLeft, RcmHeaderRight, RcmHeaderWrapper } from './style'

interface IProps {
  children?: ReactNode,
  title?: string,
  keywords?: string[],
  showIcon?: boolean,
  right?: string,
  keywordsClick?: any
}
const ThemeHeaderRcm: React.FC<IProps> = memo((props) => {
  const { title, keywords, showIcon, right, keywordsClick } = props
  console.log('showIcon', showIcon);

  return (
    <RcmHeaderWrapper showIcon={showIcon}>
      <RcmHeaderLeft>
        <h2 className="hot-title">
          <a href="/discover/recommend" className="no-link hot-text">
            {title}
          </a>
        </h2>
        <ul className="keywords">
          {keywords && keywords.map((item) => {
            return (
              <li className="item" key={item}>
                <a
                  href="/"
                  onClick={(e) => {
                    e.preventDefault()
                    keywordsClick(item)
                  }}
                >
                  {item}
                </a>
                <span className="line">|</span>
              </li>
            )
          })}
        </ul>
      </RcmHeaderLeft>
      <RcmHeaderRight>
        <span>{right}</span>
        {showIcon && <i className="icon"></i>}
      </RcmHeaderRight>
    </RcmHeaderWrapper>
  )
})
export default ThemeHeaderRcm